<template>
	<view>
		<base-headers :isSearch="false"/>
		<view class="content">
			<!-- 搜索框 -->
			<view class="search-box">
				<view class="search">
					<image src="../../static/search.png"></image>
					<input type="text" placeholder="请输入关键字" focus placeholder-style="color:rgb(144, 147, 153);"
						confirm-type="search" @confirm="getData()" @focus="isShow=true"
						@blur="outInput" v-model.lazy.trim="r.title">
					<icon v-if="isShow && r.title!=''" @click="clearInput" type="clear" size="20"></icon>
				</view>
				<view class="search-button" @click="getData()">
					搜索
				</view>
			</view>
			<view class="title">
				搜索推荐
				<text v-if="isSearch">{{total}}条搜索</text>
			</view>
			<!-- 推荐内容 -->
			<view v-if="!isSearch" class="title-box">
				<view class="title-item" v-for="(item,index) in data" :key="index" @click="toUrl(item.id)">
					{{item.title}}
				</view>
			</view>
			<!-- 搜索结果 -->
			<view v-else>
				<component-detail :data="newsData"/>
				<image v-if="total==0 && isSearch" src="../../static/404.jpg" style="width: 640rpx; height: 480rpx;">
				</image>
				<loading-more v-else :isMore="isMore" @click.native="getMore"/>
			</view>
		</view>
		<top-button :top="top"/>
	</view>
</template>

<script>
	import {
		getRecommend,
		getSearchTitle
	} from "../../api/api"
	import comments from "../../components/comments/comments.vue"
	import {
		debounce
	} from "../../utils/util"
	export default {
		data() {
			return {
				data: [],
				newsData: [],
				total: 0,
				isSearch: false,
				isMore: 0,
				r: {
					pageNum: 1,
					pageSize: 10,
					title: ''
				},
				isShow: false,
				top: 0
			}
		},
		components: {
			comments
		},
		mounted() {
			getRecommend({
				pageNum: 1,
				pageSize: 10,
				isAsc: 'desc',
				orderByColumn: 'createTime',
				type: 1
			}).then(res => {
				this.data = res.rows
			})
		},
		onPageScroll(e) {
			debounce(() => {
				this.top = e.scrollTop
			})
		},
		onReachBottom() {
			this.getMore()
		},
		methods: {
			toUrl(e) {
				uni.navigateTo({
					url: '../../subpages/news-detail/news-detail?id=' + e
				})
			},
			outInput() {
				setTimeout(() => {
					this.isShow = false
				}, 50)
			},
			clearInput() {
				this.changeValue = ''
			},
			getData() {
				const num = this.r.pageNum
				getSearchTitle(this.r).then(res => {
					this.newsData = num==1?res.rows:this.newsData.concat(res.rows)
					this.total = res.total
					this.isSearch = true
					this.isMore = 0
				})
				if (this.total <= num * 10) {
					this.isMore = 2
				}
			},
			getMore() {
				this.isMore = 1
				if (this.r.pageNum * 10 < this.total) {
					this.r.pageNum++
					this.getData(this.r)
				} else {
					this.isMore = 2
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.search-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 26rpx;
	}

	.search {
		height: 64rpx;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid rgb(238, 238, 238);
		flex: 1;
		display: flex;
		align-items: center;
		padding: 0 9px;
	}

	.search>image {
		width: 40rpx;
		height: 40rpx;
	}

	.search>input {
		flex: 1;
		font-size: 28rpx;
		color: rgb(96, 98, 102);
		margin: 0 5px;
	}

	.search-button {
		width: 80rpx;
		margin-left: 5px;
		text-align: center;
		font-family: NotoSansHans-Bold;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34px;
		letter-spacing: 0px;
		color: rgb(186, 8, 37);
	}

	.title {
		width: 100%;
		font-family: NotoSansHans-Bold;
		font-size: 30rpx;
		font-weight: 400;
		font-stretch: normal;
		line-height: 68rpx;
		letter-spacing: 0;
		color: #272727;
		display: flex;
		justify-content: space-between;
	}

	.title>text {
		font-family: NotoSansHans-Regular;
		font-size: 22rpx;
		font-weight: 400;
		font-stretch: normal;
		letter-spacing: 0;
		color: #676767;
	}

	.title-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.title-item {
		width: calc(50% - 20rpx);
		padding: 0 10rpx;
		font-family: NotoSansHans-Regular;
		font-size: 28rpx;
		font-weight: 400;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0px;
		color: #000;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>
